<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   千米 : <input type = "text" v-model="kilometers">
		   米 : <input type = "text" v-model="meters">
		</div>
		<p id="info"></p>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            kilometers: 0,
    		            meters: 0
    		        }
    		    },
    		    watch: {
    	            kilometers(val) {
						console.log("kilometers(val)",val);
    	                this.meters = val * 1000;
    	            },
	                // 监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
    	            meters(val, oldVal) {
						console.log("meters(val, oldVal)",val,oldVal);
    	                this.kilometers = val / 1000;
    	            }
		        }
		    }).mount('#app');
		    
            vm.$watch('kilometers', (newValue, oldValue) => {
                console.log("vm.$watch",newValue,oldValue);
            	// 这个回调将在 vm.kilometers 改变后调用
            	document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
            })
		</script>
	</body>
</html>